<template>
	<view class="container">
		<view class="header">
			<text class="title">收藏夹</text>
			
		</view>
		<view class="header-tiele">
			<text class="wz1">全部</text>
			<text class="wz1">降价</text>
			<text class="wz1">促销</text>
		</view>
		<view class="wz2">
		<text>共四件商品</text>
		</view>
		<view class="collection-list">
			<view class="collection-item" v-for="(item,index) in collectionList" :key="index">
				<view><image src="../../../static/images/banner/微信图片_20250518203618.png" class="item-image"></image></view>
				<view class="item-info">
					<text class="item-title">{{item.title}}</text>
					<text class="item-price">{{item.price}}</text>
					<view class="an">
					<button class="add-to-cart-btn">加入购物车</button>
						<button class="sc">删除</button></view>
				</view>
			</view>
		</view>
		<view class="collection-list">
			<view class="collection-item" v-for="(item,index) in collectionList" :key="index">
			<view><image src="../../../static/images/banner/微信图片_20250518203618.png" class="item-image"></image></view>
				<view class="item-info">
					<text class="item-title">{{item.title}}</text>
					<text class="item-price">{{item.price}}</text>
					<view class="an">
					<button class="add-to-cart-btn">加入购物车</button>
					<button class="sc">删除</button></view>
				</view>
			</view>
		</view>
		<view class="collection-list">
			<view class="collection-item" v-for="(item,index) in collectionList" :key="index">
				<view><image src="../../../static/images/banner/微信图片_20250518203618.png" class="item-image"></image></view>
				<view class="item-info">
					<text class="item-title">{{item.title}}</text>
					<text class="item-price">{{item.price}}</text>
					<view class="an">
					<button class="add-to-cart-btn">加入购物车</button>
					<button class="sc">删除</button></view>
				</view>
			</view>
		</view>
		<view class="collection-list">
			<view class="collection-item" v-for="(item,index) in collectionList" :key="index">
					<view><image src="../../../static/images/banner/微信图片_20250518203618.png" class="item-image"></image></view>
				<view class="item-info">
					<text class="item-title">{{item.title}}</text>
					<text class="item-price">{{item.price}}</text>
					<view class="an">
					<button class="add-to-cart-btn">加入购物车</button>
					<button class="sc">删除</button></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				collectionList:[
					{
						imageUrl:'',
							title:'澳洲谷饲安格斯M3牛腱子肉',
						price:'￥69.9'
					},
				]
			};
		}
	};
</script>

<style>
	.wz2{
		font-size: 25rpx;
		color:gainsboro;
		margin: 5rpx;
		
	}
	.header-tiele{
	
		background-color:palegreen;
		height: 50rpx;
		
		
		
	}
	.wz1{
		color: green;
		padding: 10px;
		line-height: 50rpx;
	}
	.collection-item{
		display: flex;
	}
	.container{
		padding: 20rpx;
		background-color: #fff;
		
	}
	.header{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
	}
	.title{
		font-size: 32rpx;
		font-weight: bold;
	
	}
	.collection-list{
		display: flex;
		margin-bottom: 20rpx;
		border: 2rpx solid #ccc;
		padding: 20rpx;
		margin: 10;
	}
	.item-image{
		width: 200rpx;
		height:200rpx;
		margin-right: 50rpx;
		border: #000 solid 1rpx;
		border-radius: 10rpx;
		
		
	}
	.item-info{
		display:flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.item-title{
		font-size: 28rpx;
	}
	.item-price{
		font-size: 24rpx;
		color: greenyellow;
	}
	.add-to-cart-btn{
		width: 160rpx;
		height: 50rpx;
	
		color: #000;
		border:solid #ccc 1rpx;
		border-radius: 20rpx; 
		font-size: 20rpx;
		line-height: 45rpx;
			margin-left: 100rpx;
	}
	.sc{
		width: 100rpx;
		height: 50rpx;
			
		color: #ff0000;
		border:solid #ccc 1rpx;
		border-radius: 20rpx; 
		font-size: 20rpx;
		line-height: 45rpx;
		margin-right:-80rpx ;
	}
	.an{
		display: flex;
	}
	
</style>